<h1>{{#if article.id}}编辑文章{{else}}添加文章{{/if}}</h1>
<form action="/admin/articles{{#if article.id}}/{{article.id}}{{/if}}" method="POST" id="articleForm">
    {{#if article.id}}<input type="hidden" name="_method" value="PUT">{{/if}}
    <div class="mb-3">
        <label for="name" class="form-label">标题</label>
        <input type="text" class="form-control" id="title" name="title" value="{{article.title}}">
    </div>
    <div class="mb-3">
        <label for="name" class="form-label">内容</label>
        <div id="editor">
            {{article.content}}
        </div>
        <input type="hidden" name="content" id="contentInput" />
    </div>
    <div class="mb-3">
        <label for="name" class="form-label">分类</label>
        <div id="categoryTree" class="border rounded p-3"></div>
    </div>
    <div class="mb-3">
        <label for="name" class="form-label">标签</label>
        <div class="d-flex flex-wrap">
            {{#each tags}}
            <div class="form-check me-3 mb-2">
                <input class="form-check-input" {{#if (contains (mapToId ../article.tags) this.id)}}checked{{/if}}
                    type="checkbox" name="tagIds" value="{{this.id}}">
                <label class="form-check-label">{{this.name}}</label>
            </div>
            {{/each}}
        </div>
    </div>
    <div class="mb-3">
        <label for="status" class="form-label">状态</label>
        <select class="form-control" id="status" name="status">
            <option value="1" {{#if article.status}}selected{{/if}}>激活</option>
            <option value="0" {{#unless article.status}}selected{{/unless}}>未激活</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">保存</button>
</form>
<script type="importmap">
    {
        "imports": {
            "ckeditor5": "/js/ckeditor5.js"
        }
    }
</script>
<script type="module">
    import {
        ClassicEditor,
        Essentials,
        Bold,
        Italic,
        Font,
        Paragraph,
        Image,
        ImageToolbar,
        ImageUpload,
        ImageResize,
        ImageStyle,
        SimpleUploadAdapter,
        Plugin
    } from 'ckeditor5';
    //用于获取文件上传的签名
    async function getSignature(filename) {
        const response = await fetch(`/admin/cos-signature?key=${encodeURIComponent(filename)}`);
        //返回签名信息的JSON数据
        return response.json();
    }
    class COSUploadAdaptor {
        //接收一个文件 加载器的实例
        constructor(loader) {
            this.loader = loader;
        }
        //上传方法，负责将文件上传到COS
        async upload() {
            //等待加载器获取要上传的文件 
            const file = await this.loader.file;
            //获取文件的上传签名信息
            const signature = await getSignature(file.name);
            //从签名信息中解构出存储桶 区域 文件键名和签名
            const { sign, key, bucket, region } = signature;
            //构建上传的url路径
            const url = `https://${bucket}.cos.${region}.myqcloud.com/${key}`;
            return fetch(url, {
                method: 'PUT',//上传新的文件 
                headers: { Authorization: sign },//设置请求头，包含认证签名信息
                body: file,//请求体为文件本身的内容
            }).then(response => {
                return { default: response.url }
            })
        }
    }
    class COSUploadAdaptorPlugin extends Plugin {
        //静态方法，定义插件的依赖关系
        static get requires() {
            return [ImageUpload];
        }
        init() {//插件的初始化方法
            //获取文件库插件 设置创建上传适配器的函数
            this.editor.plugins.get('FileRepository').createUploadAdapter = (fileLoader) => new COSUploadAdaptor(fileLoader)
        }
    }
    ClassicEditor
        .create(document.querySelector('#editor'), {
            plugins: [Essentials, Bold, Italic, Font, Paragraph, Image,
                ImageToolbar, ImageResize, ImageStyle, ImageUpload, COSUploadAdaptorPlugin],
            image: {
                toolbar: ['imageTextAlternative', 'imageStyle:side', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original']
            },
            toolbar: {
                items: [
                    'undo', 'redo', '|', 'bold', 'italic', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'insertImage'
                ]
            }
        })
        .then(editor => {
            const form = document.getElementById('articleForm');
            const contentInput = document.getElementById('contentInput');
            form.addEventListener('submit', () => {
                //当表单提交的时候，获取富文本编辑器最新的值并赋给contentInput隐藏域提交表单 
                contentInput.value = editor.getData();
            });
        }).catch(error => console.log(error))
</script>


<script>
    const categoryTree = {{{ json categoryTree }}};
    const selectedCategoryIds = {{{ mapToId article.categories }}};//当前的文章对应的分类的ID数组
    function renderTree(categories) {
        let html = '<ul class="list-unstyled">';
        categories.forEach(function (category) {
            html += `
            <li class="mb-2">
                <div class="d-flex align-items-center">
                    ${category.children?.length > 0 ? '<span class="toggle me-2 cursor-pointer"><i class="bi bi-folder-plus"></i></span>' : '<span class="me-4"></span>'}
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" name="categoryIds" value="${category.id}" ${selectedCategoryIds.includes(category.id) ? 'checked' : ''}>
                        ${category.name}
                    </label>
                </div>
                ${category.children?.length > 0 ? `<div class="children ms-4" >${renderTree(category.children)}</div>` : ''}
            </li>`;
        });
        html += '</ul>';
        return html;
    }
    $(function () {
        $('#categoryTree').html(renderTree(categoryTree));
        $('body').on('click', '.toggle', function () {
            const childrenContainer = $(this).parent().siblings('.children');
            if (childrenContainer.is(':visible')) {
                childrenContainer.hide();
                $(this).html('<i class="bi bi-folder-plus"></i>');
            } else {
                childrenContainer.show();
                $(this).html('<i class="bi bi-folder-minus"></i>');
            }
        });
    });
</script>